<template>
  <div class="payment-container">
    <el-card class="page-header-card">
      <div class="page-header">
        <div class="page-title">
          <h2>智付停车</h2>
          <p>在线支付停车费、查看缴费记录</p>
        </div>
      </div>
    </el-card>
    
    <!-- 统计信息 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card class="stats-card">
          <div class="stats-overview">
            <div class="stat-box total">
              <div class="stat-value">¥{{ stats.total_amount.toFixed(2) }}</div>
              <div class="stat-label">总支付金额</div>
            </div>
            <div class="stat-box today">
              <div class="stat-value">¥{{ stats.today_amount.toFixed(2) }}</div>
              <div class="stat-label">今日支付</div>
            </div>
            <div class="stat-box parking">
              <div class="stat-value">¥{{ stats.parking_amount.toFixed(2) }}</div>
              <div class="stat-label">停车费</div>
            </div>
            <div class="stat-box reservation">
              <div class="stat-value">¥{{ stats.reservation_amount.toFixed(2) }}</div>
              <div class="stat-label">预约费</div>
            </div>
            <div class="stat-box balance">
              <div class="stat-value">¥{{ stats.balance.toFixed(2) }}</div>
              <div class="stat-label">账户余额</div>
              <el-button type="primary" size="small" @click="showRechargeDialog" style="margin-top: 10px;">充值</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 待支付订单 -->
    <div v-if="pendingPayment" class="pending-payment-container">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-card class="pending-card">
            <template #header>
              <div class="card-header">
                <span>待支付订单</span>
                <el-tag type="warning">待支付</el-tag>
              </div>
            </template>
            
            <div class="pending-content">
              <div class="pending-info">
                <div class="info-item">
                  <span class="info-label">订单编号:</span>
                  <span class="info-value">{{ pendingPayment.order_number }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">创建时间:</span>
                  <span class="info-value">{{ formatDateTime(pendingPayment.created_at) }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">支付类型:</span>
                  <span class="info-value">{{ pendingPayment.payment_type_text }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">支付金额:</span>
                  <span class="info-value price">¥{{ pendingPayment.amount.toFixed(2) }}</span>
                </div>
              </div>
              
              <div class="payment-methods">
                <h3>选择支付方式</h3>
                <div class="methods-grid">
                  <div 
                    v-for="method in paymentMethods" 
                    :key="method.id"
                    :class="['method-item', { active: selectedMethod === method.id }]"
                    @click="selectedMethod = method.id"
                  >
                    <div class="method-icon">
                      <el-icon v-if="method.icon === 'alipay'"><Picture /></el-icon>
                      <el-icon v-else-if="method.icon === 'wechat'"><ChatDotRound /></el-icon>
                      <el-icon v-else-if="method.icon === 'bank-card'"><CreditCard /></el-icon>
                      <el-icon v-else-if="method.icon === 'wallet'"><Money /></el-icon>
                      <el-icon v-else><More /></el-icon>
                    </div>
                    <div class="method-name">{{ method.name }}</div>
                    <div v-if="method.id === 3" class="method-balance">
                      余额: ¥{{ stats.balance }}
                    </div>
                  </div>
                </div>
                
                <div class="payment-actions">
                  <el-button type="primary" @click="processPayment" :loading="processingPayment">确认支付</el-button>
                  <el-button @click="cancelPayment">取消支付</el-button>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <!-- 支付记录列表 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card class="record-card">
          <template #header>
            <div class="card-header">
              <span>支付记录</span>
              <div class="filter-actions">
                <!-- 筛选条件 -->
                <el-select 
                  v-model="filterPaymentType" 
                  placeholder="支付类型" 
                  clearable
                  @change="handleFilterChange"
                  style="width: 110px; margin-right: 10px;"
                >
                  <el-option label="全部" value="" />
                  <el-option label="停车费" :value="0" />
                  <el-option label="预约费" :value="1" />
                </el-select>
                
                <el-select 
                  v-model="filterPaymentMethod" 
                  placeholder="支付方式" 
                  clearable
                  @change="handleFilterChange"
                  style="width: 120px; margin-right: 10px;"
                >
                  <el-option label="全部" value="" />
                  <el-option 
                    v-for="method in paymentMethods"
                    :key="method.id"
                    :label="method.name"
                    :value="method.id"
                  />
                </el-select>
                
                <el-select 
                  v-model="filterStatus" 
                  placeholder="支付状态" 
                  clearable
                  @change="handleFilterChange"
                  style="width: 110px; margin-right: 10px;"
                >
                  <el-option label="全部" value="" />
                  <el-option label="已支付" :value="1" />
                  <el-option label="已退款" :value="2" />
                  <el-option label="已取消" :value="3" />
                </el-select>
                
                <el-button 
                  type="primary"
                  @click="fetchPaymentRecords"
                  :icon="Refresh"
                >刷新</el-button>
              </div>
            </div>
          </template>
          
          <div v-loading="recordsLoading">
            <el-table
              :data="payments"
              style="width: 100%"
              :empty-text="emptyText"
              @row-click="showPaymentDetail"
            >
              <el-table-column prop="orderNumber" label="订单编号" width="150">
                <template #default="scope">
                  {{ scope.row.orderNumber || scope.row.order_number }}
                </template>
              </el-table-column>
              <el-table-column label="支付类型" width="100">
                <template #default="scope">
                  <el-tag :type="(scope.row.paymentType || scope.row.payment_type) === 0 ? 'primary' : 'success'">
                    {{ scope.row.paymentTypeText || scope.row.payment_type_text || (scope.row.paymentType === 0 ? '停车费' : '预约费') }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="支付方式" width="120">
                <template #default="scope">
                  <span>{{ scope.row.paymentMethodText || scope.row.payment_method_text || getPaymentMethodText(scope.row.paymentMethod || scope.row.payment_method) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="支付金额" width="120">
                <template #default="scope">
                  <span class="price">¥{{ (scope.row.amount || 0).toFixed(2) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="支付时间" width="180">
                <template #default="scope">
                  {{ formatDateTime(scope.row.payTime || scope.row.pay_time) }}
                </template>
              </el-table-column>
              <el-table-column label="支付状态" width="100">
                <template #default="scope">
                  <el-tag :type="getStatusType(scope.row.status)">
                    {{ scope.row.statusText || scope.row.status_text || getStatusText(scope.row.status) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="创建时间" width="180">
                <template #default="scope">
                  {{ formatDateTime(scope.row.createdAt || scope.row.created_at) }}
                </template>
              </el-table-column>
              <el-table-column label="备注">
                <template #default="scope">
                  {{ scope.row.remark || '-' }}
                </template>
              </el-table-column>
            </el-table>
            
            <!-- 分页 -->
            <div class="pagination-container" v-if="total > 0">
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[5, 10, 20, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 支付详情对话框 -->
    <el-dialog
      v-model="detailVisible"
      title="支付详情"
      width="500px"
    >
      <div v-if="selectedPayment" class="payment-detail">
        <div class="detail-header">
          <div class="detail-order">{{ selectedPayment.orderNumber || selectedPayment.order_number }}</div>
          <el-tag :type="getStatusType(selectedPayment.status)">
            {{ selectedPayment.statusText || selectedPayment.status_text || getStatusText(selectedPayment.status) }}
          </el-tag>
        </div>
        
        <div class="detail-item">
          <span class="detail-label">支付类型:</span>
          <span class="detail-value">{{ selectedPayment.paymentTypeText || selectedPayment.payment_type_text || (selectedPayment.paymentType === 0 ? '停车费' : '预约费') }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">支付方式:</span>
          <span class="detail-value">{{ selectedPayment.paymentMethodText || selectedPayment.payment_method_text || getPaymentMethodText(selectedPayment.paymentMethod || selectedPayment.payment_method) }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">支付金额:</span>
          <span class="detail-value price">¥{{ (selectedPayment.amount || 0).toFixed(2) }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">支付时间:</span>
          <span class="detail-value">{{ formatDateTime(selectedPayment.payTime || selectedPayment.pay_time) }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">交易流水号:</span>
          <span class="detail-value">{{ selectedPayment.transactionId || selectedPayment.transaction_id || '-' }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">创建时间:</span>
          <span class="detail-value">{{ formatDateTime(selectedPayment.createdAt || selectedPayment.created_at) }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">备注信息:</span>
          <span class="detail-value">{{ selectedPayment.remark || '-' }}</span>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 余额充值对话框 -->
    <el-dialog
      v-model="rechargeVisible"
      title="账户充值"
      width="400px"
    >
      <div class="recharge-container">
        <div class="current-balance">
          <span class="balance-label">当前余额:</span>
          <span class="balance-value price">¥{{ stats?.balance || '0.00' }}</span>
        </div>
        
        <div class="recharge-amount">
          <el-form
            ref="rechargeFormRef"
            :model="rechargeForm"
            :rules="rechargeRules"
            label-position="top"
          >
            <el-form-item prop="amount" label="充值金额">
              <el-input
                v-model="rechargeForm.amount"
                type="number"
                placeholder="请输入充值金额"
                min="0"
              >
                <template #prefix>¥</template>
              </el-input>
            </el-form-item>
            
            <div class="quick-amounts">
              <el-button 
                v-for="amount in [50, 100, 200, 500]" 
                :key="amount"
                @click="rechargeForm.amount = amount"
                plain
              >¥{{ amount }}</el-button>
            </div>
            
            <el-form-item>
              <el-button 
                type="primary" 
                @click="processRecharge" 
                :loading="processingRecharge"
                style="width: 100%"
              >确认充值</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-dialog>
    
    <!-- 支付结果对话框 -->
    <el-dialog
      v-model="resultVisible"
      :title="paymentSuccess ? '支付成功' : '支付失败'"
      width="400px"
    >
      <div class="result-container">
        <div class="result-icon" :class="{ success: paymentSuccess, error: !paymentSuccess }">
          <el-icon v-if="paymentSuccess"><Select /></el-icon>
          <el-icon v-else><CloseBold /></el-icon>
        </div>
        
        <div class="result-message">
          {{ paymentSuccess ? '支付已完成，感谢您的使用!' : (paymentError || '支付失败，请重试') }}
        </div>
        
        <div class="result-actions">
          <el-button 
            v-if="paymentSuccess && pendingPayment?.paymentType === 0"
            type="primary" 
            @click="handleEnterParking"
          >立即入场</el-button>
          <el-button 
            @click="handleResultClose"
          >{{ paymentSuccess ? '关闭' : '返回' }}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Refresh, 
  Picture, 
  ChatDotRound, 
  CreditCard, 
  Money, 
  More, 
  Select, 
  CloseBold 
} from '@element-plus/icons-vue'
import { 
  getPaymentRecords, 
  getPaymentDetail, 
  getPaymentStats, 
  getPaymentMethods,
  getUserBalance,
  rechargeBalance,
  createPayment,
  processPayment as processPaymentApi,
  cancelPayment as cancelPaymentApi,
  getPaymentByOrderNumber
} from '@/api/payment'
import { getCurrentParkingStatus, updateParkingRecord } from '@/api/parkingRecord'
import { formatDateTime } from '@/utils/format'

// 路由
const route = useRoute()
const router = useRouter()

// 统计信息
const stats = ref({
  total_amount: 0,
  monthly_amount: 0,
  today_amount: 0,
  parking_amount: 0,
  reservation_amount: 0,
  balance: 0
})

// 支付方式列表
const paymentMethods = ref([
  { id: 1, name: '微信支付', icon: 'wechat', available: true },
  { id: 2, name: '银行卡', icon: 'bank-card', available: true },
  { id: 3, name: '账户余额', icon: 'wallet', available: true }
])

// 支付记录列表
const payments = ref([])
const recordsLoading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 筛选条件
const filterPaymentType = ref('')
const filterPaymentMethod = ref('')
const filterStatus = ref('')

// 详情对话框
const detailVisible = ref(false)
const selectedPayment = ref(null)

// 待支付订单
const pendingPayment = ref(null)
const selectedMethod = ref(0) // 默认选择支付宝
const processingPayment = ref(false)

// 余额充值对话框
const rechargeVisible = ref(false)
const rechargeFormRef = ref(null)
const rechargeForm = reactive({
  amount: ''
})
const processingRecharge = ref(false)

// 充值验证规则
const rechargeRules = {
  amount: [
    { required: true, message: '请输入充值金额', trigger: 'blur' },
    { type: 'number', message: '金额必须为数字', trigger: 'blur', transform: value => Number(value) },
    { validator: (rule, value, callback) => {
      const num = Number(value);
      if (isNaN(num)) {
        callback(new Error('请输入有效的金额'));
      } else if (num <= 0) {
        callback(new Error('金额必须大于0'));
      } else if (num > 10000) {
        callback(new Error('单次充值金额不能超过10000元'));
      } else {
        callback();
      }
    }, trigger: 'blur' }
  ]
}

// 支付结果对话框
const resultVisible = ref(false)
const paymentSuccess = ref(false)
const paymentError = ref('')

// 空数据提示
const emptyText = computed(() => {
  if (filterPaymentType.value || filterPaymentMethod.value || filterStatus.value) {
    return '没有符合条件的记录';
  }
  return '暂无支付记录';
})

// 获取支付统计信息
const fetchStats = async () => {
  try {
    const [statsRes, balanceRes] = await Promise.all([
      getPaymentStats(),
      getUserBalance()
    ])
    
    if (statsRes.code === 200 && balanceRes.code === 200) {
      // 确保所有必要的字段都有默认值
      const statsData = statsRes.data || {}
      const typeAmounts = statsData.typeAmounts || {}
      
      stats.value = {
        total_amount: statsData.todayAmount || 0,
        monthly_amount: statsData.monthlyAmount || 0,
        today_amount: statsData.todayAmount || 0,
        parking_amount: typeAmounts[0] || 0, // 0表示停车费
        reservation_amount: typeAmounts[1] || 0, // 1表示预约费
        balance: balanceRes.data?.balance || 0
      }
    }
  } catch (error) {
    console.error('获取支付统计信息失败', error)
    // 设置默认值
    stats.value = {
      total_amount: 0,
      monthly_amount: 0,
      today_amount: 0,
      parking_amount: 0,
      reservation_amount: 0,
      balance: 0
    }
    ElMessage.error('获取支付统计信息失败')
  }
}

// 获取支付记录
const fetchPaymentRecords = async () => {
  try {
    recordsLoading.value = true
    const params = {
      page: currentPage.value,
      size: pageSize.value
    }
    
    // 添加筛选条件
    if (filterPaymentType.value !== '') {
      params.paymentType = filterPaymentType.value
    }
    if (filterPaymentMethod.value !== '') {
      params.paymentMethod = filterPaymentMethod.value
    }
    if (filterStatus.value !== '') {
      params.status = filterStatus.value
    }
    
    const response = await getPaymentRecords(params)
    console.log('支付记录响应:', response) // 添加日志
    
    if (response.code === 200 && response.data) {
      // 确保返回的数据格式正确
      payments.value = response.data.records.map(record => ({
        ...record,
        // 确保金额是数字类型
        amount: typeof record.amount === 'string' ? parseFloat(record.amount) : record.amount,
        // 添加支付类型文本
        paymentTypeText: record.paymentType === 0 ? '停车费' : '预约费',
        // 添加支付方式文本
        paymentMethodText: getPaymentMethodText(record.paymentMethod),
        // 添加状态文本
        statusText: getStatusText(record.status)
      }))
      total.value = response.data.total || 0
    } else {
      ElMessage.error(response.message || '获取支付记录失败')
    }
  } catch (error) {
    console.error('获取支付记录失败:', error)
    ElMessage.error('获取支付记录失败')
  } finally {
    recordsLoading.value = false
  }
}

// 获取支付方式文本
const getPaymentMethodText = (method) => {
  const methodMap = {
    1: '微信支付',
    2: '银行卡',
    3: '账户余额'
  }
  return methodMap[method] || '未知'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '待支付',
    1: '已支付',
    2: '已退款',
    3: '已取消'
  }
  return statusMap[status] || '未知'
}

// 获取支付详情
const fetchPaymentDetail = async (id) => {
  try {
    const res = await getPaymentDetail(id)
    selectedPayment.value = res.data
  } catch (error) {
    ElMessage.error('获取支付详情失败')
  }
}

// 处理筛选变更
const handleFilterChange = () => {
  currentPage.value = 1
  fetchPaymentRecords()
}

// 处理分页
const handleSizeChange = (val) => {
  pageSize.value = val
  fetchPaymentRecords()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchPaymentRecords()
}

// 显示支付详情
const showPaymentDetail = (row) => {
  selectedPayment.value = row
  detailVisible.value = true
}

// 处理支付
const processPayment = async () => {
  if (!selectedMethod.value) {
    ElMessage.warning('请选择支付方式')
    return
  }
  
  // 如果是余额支付，检查余额是否足够
  if (selectedMethod.value === 3 && stats.value.balance < pendingPayment.value.amount) {
    ElMessage.warning('账户余额不足，请先充值')
    return
  }
  
  try {
    processingPayment.value = true
    
    // 生成交易流水号
    const transactionId = `TX${Date.now()}${Math.floor(Math.random() * 1000).toString().padStart(3, '0')}`
    
    // 调用支付API
    const res = await processPaymentApi(
      pendingPayment.value.id, 
      selectedMethod.value,
      transactionId
    )
    
    // 支付成功
    paymentSuccess.value = true
    paymentError.value = ''
    resultVisible.value = true
    
    // 刷新数据
    await fetchStats()
    await fetchPaymentRecords()
    
    // 如果是停车费支付，更新停车记录状态
    if (pendingPayment.value.paymentType === 0 && route.query.recordId) {
      try {
        await updateParkingRecord(route.query.recordId, {
          status: 1 // 设置为已完成状态
        })
      } catch (error) {
        console.error('更新停车记录状态失败:', error)
      }
    }
    
    // 清理待支付订单
    pendingPayment.value = null
    
  } catch (error) {
    paymentSuccess.value = false
    paymentError.value = error.message || '支付失败，请重试'
    resultVisible.value = true
  } finally {
    processingPayment.value = false
  }
}

// 取消支付
const cancelPayment = async () => {
  try {
    await ElMessageBox.confirm('确定要取消此支付吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await cancelPaymentApi(pendingPayment.value.id)
    ElMessage.success('支付已取消')
    
    pendingPayment.value = null
    
    // 刷新数据
    fetchPaymentRecords()
    
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error(error.message || '取消支付失败')
    }
  }
}

// 显示充值对话框
const showRechargeDialog = () => {
  rechargeForm.amount = ''
  rechargeVisible.value = true
}

// 处理充值
const processRecharge = async () => {
  await rechargeFormRef.value.validate(async (valid) => {
    if (!valid) return
    
    const amount = parseFloat(rechargeForm.amount)
    
    try {
      processingRecharge.value = true
      
      // 调用充值API
      const res = await rechargeBalance(amount)
      
      ElMessage.success('充值成功')
      rechargeVisible.value = false
      
      // 更新余额
      stats.value.balance = res.data.balance
      
    } catch (error) {
      ElMessage.error(error.message || '充值失败')
    } finally {
      processingRecharge.value = false
    }
  })
}

// 处理结果对话框关闭
const handleResultClose = () => {
  resultVisible.value = false
  
  // 如果支付成功且来自其他页面的跳转，可以返回
  if (paymentSuccess.value && route.query.from) {
    router.push(route.query.from)
  }
}

// 根据状态获取标签类型
const getStatusType = (status) => {
  switch (status) {
    case 0: return 'info'
    case 1: return 'success'
    case 2: return 'warning'
    case 3: return 'danger'
    default: return 'info'
  }
}

// 从URL参数创建支付订单
const createPaymentFromParams = async () => {
  const { orderNumber, type } = route.query
  
  if (orderNumber) {
    try {
      // 获取支付订单详情
      const res = await getPaymentByOrderNumber(orderNumber)
      if (res.code === 200) {
        pendingPayment.value = {
          ...res.data,
          order_number: res.data.orderNumber || res.data.order_number,
          amount: res.data.amount || 0,
          created_at: res.data.createdAt || res.data.created_at,
          payment_type_text: res.data.paymentType === 0 ? '停车费' : '预约费'
        }
        console.log('待支付订单信息:', pendingPayment.value)
      } else {
        ElMessage.error(res.message || '获取支付订单失败')
      }
    } catch (error) {
      console.error('获取支付订单失败:', error)
      ElMessage.error('获取支付订单失败')
    }
  }
}

// 监听路由参数变化
watch(() => route.query, (query) => {
  if (query.orderNumber) {
    createPaymentFromParams()
  }
}, { immediate: true })

// 组件挂载时获取数据
onMounted(async () => {
  await fetchStats()
  if (route.query.orderNumber) {
    await createPaymentFromParams()
  }
  await fetchPaymentRecords()
})

// 处理入场
const handleEnterParking = () => {
  // 关闭支付结果对话框
  resultVisible.value = false
  // 跳转到入场页面
  router.push('/parking/enter')
}

// 处理支付成功
const handlePaymentComplete = async () => {
  try {
    // 设置支付成功状态
    paymentSuccess.value = true;
    paymentError.value = null;

    // 刷新数据
    await fetchStats();
    await fetchPaymentRecords();

    // 如果是停车费支付，更新停车记录状态
    if (pendingPayment.value.paymentType === 0) {
      const recordId = route.query.recordId;
      if (recordId) {
        try {
          await updateParkingRecord(recordId, {
            status: 1 // 设置为已完成状态
          });
        } catch (error) {
          console.error('更新停车记录状态失败:', error);
        }
      }
    }

    // 清除待处理的支付
    pendingPayment.value = null;
  } catch (error) {
    console.error('处理支付完成时出错:', error);
  }
};
</script>

<style scoped>
.payment-container {
  min-height: calc(100vh - 180px);
}

.page-header-card {
  margin-bottom: 20px;
  background: linear-gradient(135deg, #3f51b5, #3949ab);
  color: white;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title h2 {
  margin: 0;
  font-size: 24px;
}

.page-title p {
  margin: 8px 0 0;
  opacity: 0.8;
  font-size: 14px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

/* 统计卡片样式 */
.stats-card {
  margin-bottom: 20px;
}

.stats-overview {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.stat-box {
  text-align: center;
  padding: 15px;
  border-radius: 8px;
  background-color: #f5f7fa;
  flex: 1;
  min-width: 100px;
  margin: 0 10px 10px 0;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

.stat-box.total {
  background-color: #ecf5ff;
}

.stat-box.total .stat-value {
  color: #409eff;
}

.stat-box.monthly {
  background-color: #f4f4f5;
}

.stat-box.monthly .stat-value {
  color: #909399;
}

.stat-box.today {
  background-color: #fdf6ec;
}

.stat-box.today .stat-value {
  color: #e6a23c;
}

.stat-box.parking {
  background-color: #ecf5ff;
}

.stat-box.parking .stat-value {
  color: #409eff;
}

.stat-box.reservation {
  background-color: #f0f9eb;
}

.stat-box.reservation .stat-value {
  color: #67c23a;
}

.stat-box.balance {
  background-color: #fef0f0;
}

.stat-box.balance .stat-value {
  color: #f56c6c;
}

/* 待支付订单样式 */
.pending-payment-container {
  margin-bottom: 20px;
}

.pending-card {
  border: 1px solid #e6a23c;
}

.pending-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pending-info {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.info-item {
  flex: 1;
  min-width: 200px;
}

.info-label {
  color: #909399;
  margin-right: 5px;
  font-size: 14px;
}

.info-value {
  color: #303133;
  font-weight: 500;
  font-size: 14px;
}

.price {
  color: #f56c6c;
  font-weight: bold;
}

.payment-methods {
  margin-top: 20px;
}

.payment-methods h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  color: #606266;
}

.methods-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
}

.method-item {
  padding: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 130px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.method-item:hover {
  border-color: #409eff;
}

.method-item.active {
  border-color: #409eff;
  background-color: #ecf5ff;
}

.method-icon {
  font-size: 24px;
  margin-bottom: 10px;
}

.method-name {
  font-size: 14px;
  color: #606266;
}

.method-balance {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.payment-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

/* 记录卡片样式 */
.record-card {
  margin-bottom: 20px;
}

.filter-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 支付详情样式 */
.payment-detail {
  padding: 10px;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.detail-order {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.detail-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.detail-label {
  width: 100px;
  color: #909399;
  font-size: 14px;
}

.detail-value {
  font-weight: 500;
  color: #303133;
  font-size: 14px;
}

/* 充值对话框样式 */
.recharge-container {
  padding: 10px;
}

.current-balance {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.balance-label {
  font-size: 14px;
  color: #909399;
}

.balance-value {
  font-size: 20px;
}

.quick-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

/* 支付结果对话框样式 */
.result-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.result-icon {
  font-size: 60px;
  margin-bottom: 20px;
}

.result-icon.success {
  color: #67c23a;
}

.result-icon.error {
  color: #f56c6c;
}

.result-message {
  font-size: 16px;
  margin-bottom: 20px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .filter-actions {
    margin-top: 10px;
    width: 100%;
  }
  
  .filter-actions .el-input,
  .filter-actions .el-select {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 10px;
  }
  
  .filter-actions .el-button {
    width: 100%;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .methods-grid {
    justify-content: center;
  }
  
  .payment-actions {
    flex-direction: column;
  }
  
  .payment-actions .el-button {
    width: 100%;
  }
  
  .detail-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .detail-label {
    width: 100%;
  }
  
  .quick-amounts {
    justify-content: space-between;
  }
  
  .quick-amounts .el-button {
    margin-right: 0;
    flex: 1;
    min-width: calc(50% - 5px);
  }
}
</style> 